wikiesfandomcom-20200214-history
Блог участника:Majort/PortableCSSPad — ваш помощник в дизайне вики
Всем привет. В этом блоге я хотел бы сделать обзор скрипта PortableCSSPad. Если кто не знает, PortableCSSPad — это скрипт на JavaScript, созданный на вики волонтёров-разработчиков участником Mathmagician в конце 2012-го года. Инструкцию по использованию можно прочесть здесь, но, если вы не знаете английского, можете читать мой блог дальше — об этом тоже будет сказано. Хотя в любом случае советую прочесть до конца, если заинтересовались — ниже многое будет сказано, чего нет на англоязычной странице с описанием на Wikia Developers Wiki. К слову, мой блог — не перевод той страницы, я лишь взял из неё часть информации. Остальное — собственные наблюдения. Кратко о предмете блога. PortableCSSPad — это интуитивно понятное и простое в обращении средство для настраивания стилей CSS. Кнопка для открытия PortableCSSPad располагается в нижней панели инструментов правее ссылки на кабинет администратора (при отсутствии у участника прав администратора — после кнопки «Настройка»). При нажатии на кнопку в центре экрана открывается окно с текстом «Type or copy/paste CSS into this box to best it out on this page» (русск. «Введите или скопируйте/вставьте CSS в это окно для его выведения на этой странице»). Да, сразу скажу, что русскоязычного перевода для PortableCSSPad на данный момент не существует, хотя, возможно, что он появится в будущем. Но, на самом деле, в этом нет большой необходимости — как я уже писал в начале этого блога, особого количества текста в PortableCSSPad нету и он понятен интуитивно. Всё, что нужно для тестирования какого-либо кода CSS — это, как уже говорилось, написать код прямо в меню или просто вставить его, например, из консоли. Действие кода сразу же, без обновления страницы, отобразится на вашем экране — например, код: .WikiaPageHeader { font-family: monospace; color: green; } Даст смену шрифта и цвета для заголовков статей. Этот код ещё будет ниже фигурировать как пример. PortableCSSPad не содержит особых инструментов для редактирования CSS — в нём нет никаких подсказок, указывающих на способы оптимизации кода или на критические ошибки в нём. При наличии ошибок он просто не будет отображать введённый код. Поэтому для написания кодов этот скрипт не подходит. Разве что для очень простых кодов ;) Окно скрипта также поддаётся перетаскиванию при помощи мыши. Для этого нужно просто навести курсор на его верхнюю часть (над окошком для ввода текста) и перетащить окно в любую часть страницы. Очень удобно, когда PortableCSSPad загораживает изменённую кодом часть страницы. Именно благодаря этой функции данный скрипт считается передвижной панелью. Дополнительные возможности скрипта Никаких других задач перед PortableCSSPad не поставлено. Но создатель сделал его максимально удобным для тех целей, которые перед ним поставлены, а именно — для тестирования стилей CSS на Викия. Поэтому в скрипте есть несколько дополнительных функций. Ниже я перечислю их: Ещё одна возможность, о которой не все знают В PortableCSSPad также добавлена ещё одна приятная возможность — при просмотре какой-либо страницы, название которой оканчивается на .css (MediaWiki:Wikia.css и MediaWiki:Common.css, например) правее заголовка появляется логотип W3C. Если на него кликнуть, пользователя перенаправит на страницу, в которой будут указаны все ошибки в коде для данной CSS-страницы. Как установить PortableCSSPad? Чтобы установить PortableCSSPad, достаточно поместить в свой глобальный JavaScript (справка по глобальному JavaScript) следующий код: importArticles({ type: 'script', articles: [ 'u:dev:PortableCSSPad/code.js' ] }); Код также можно поместить в личный локальный JavaScript, но, если вы планируете использовать его на нескольких вики, то лучшим вариантом будет, разумеется, глобальный JavaScript. Также, PortableCSSPad разрешено помещать в общий JavaScript, так как он не нарушает общую структуру страниц вики. Для этого этот импорт нужно поместить на страницу MediaWiki:Wikia.js или MediaWiki:Common.js на Вашей вики. Небольшая заметка: Это расширение на JS для CSS, а не наоборот :) Не перепутайте. Галерея CSSPad.png|Окно PortableCSSPad в действии PortableCSSPad.png CSSPad3.png|Дополнительная кнопка для проверки страниц CSS Иконки CSSPad.png|Иконки для кнопок в CSSPad. Да, в скрипте используется просто единая картинка, откорректированная таким образом, чтобы каждая её часть служила кнопкой ---- На этом я заканчиваю свой блог. У вас есть какие-нибудь вопросы/предложения по поводу него и описанного предмета? Оставьте это в комментариях! Счастливого редактирования! Категория:Записи в блоге Категория:Блоги/Для заглавной